import React from 'react';
import type { MouseEvent } from 'react';
import classNames from 'classnames';
const rotateMap = {
  right: [180, 0],
  left: [0, 180],
  top: [90, 270],
  bottom: [270, 90],
};
function getRotate(direction: string | undefined) {
  return rotateMap[direction as keyof typeof rotateMap] || [0, 0];
}
type Align = 'horizontal' | 'vertical';
type Direction = 'right' | 'left' | 'bottom' | 'top';
interface CollapsedHandlerProps {
  align?: Align;
  direction?: Direction;
  isCollapsed?: boolean;
  className?: string;
  onToggle?: Function;
}
const CollapsedHandler = (props: CollapsedHandlerProps) => {
  const { className, isCollapsed, align, direction, onToggle } = props;
  const isVertical = (align === 'vertical') as boolean;
  const rotate = getRotate(direction);
  const onClick = () => {
    onToggle && onToggle();
  };
  return (
    <div
      className={classNames(
        className,
        isVertical ? 'w12 h100p' : 'h12 w100p',
        'flex items-center justify-center icon-color icon-color-hover bg-sider',
        {
          pointer: onToggle,
        },
      )}
      onClick={onClick}
    >
      <span
        style={{
          transition: 'all ease-in-out 0.5s',
          transform: `rotate(${isCollapsed ? rotate[0] : rotate[1]}deg)`,
        }}
      >
        <span className="iconfont icon-xiticebianlan-shouqi"></span>
      </span>
    </div>
  );
};
CollapsedHandler.defaultProps = {
  isCollapsed: false,
  align: 'vertical',
  direction: 'right',
};
export default CollapsedHandler;
